<template>
  <div class="demand">
    <!--按钮、搜索-->
    <p class="opr">
      <el-input
              placeholder="搜索"
              v-model="query" size="mini" class="left searchIpt" @keyup.enter.native="getArticleDemandfront(true)">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getArticleDemandfront(true)"></i>
      </el-input>
  <!--     <el-select v-model="dicId" placeholder="所有行业" size="mini" @change='getArticleDemandfront'>
        <el-option label="所有行业" value=""></el-option>
        <el-option label="汽车" value="1"></el-option>
        <el-option label="教育" value="2"></el-option>
      </el-select> -->
          <el-select type="warning" v-model="dicId" placeholder="请选择" size="mini" @change="getArticleDemandfront(true)">
            <el-option
               v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
           </el-option>
         </el-select>
        <el-select v-model="status" placeholder="需求状态" size="mini" @change='getArticleDemandfront(true)'>
        <el-option label="需求状态" value=""></el-option>
        <el-option label="征稿中" value="1"></el-option>
        <el-option label="已投稿" value="2"></el-option>
        <!-- <el-option label="已完成" value="3"></el-option> -->
        <el-option label="已截稿" value="3"></el-option>
      </el-select>
    </p>
    <!-- 操作区-->
 <!--    <p class="opr flexOpr">
      <span class="count">需求数（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              width = "240"
              label="需求">
        <template slot-scope="scope">
          <p class="price">{{ scope.row.name }}</p>
          <p class="price">{{scope.row.description}}</p>
        </template>
      </el-table-column>
      <el-table-column
              width = "120"
              prop="dicName"
              label="分类">
      </el-table-column>
      <el-table-column
              prop="adminUserName"
              label="发布商">
      </el-table-column>
      <el-table-column
              label="价格(元)">
        <template slot-scope="scope">
          <p>{{ scope.row.amount | money }}</p>
        </template>
      </el-table-column>
      <el-table-column
              prop="applyNum"
              label="申请人数">
      </el-table-column>
      <el-table-column
              label="需求状态">
         <template slot-scope="scope">
              <div class="rownamer1" v-if="scope.row.status==2 && (scope.row.endTime > endTimes) && (scope.row.articleStatus == 0 || scope.row.articleStatus == null)">征稿中</div>
                 <div class="rownamer2" v-if="(scope.row.status==2 || scope.row.status==3 || scope.row.status==5) && (scope.row.articleStatus != 0 && scope.row.articleStatus != null)">已投稿</div>
                 <!-- <div class="rownamer1" v-if="scope.row.status==4" >待写作</div> -->
                 <!-- <div class="rownamer3" v-if="scope.row.status==3" >已完成</div> -->
                 <div class="rownamer3" v-if="(scope.row.endTime <= endTimes || scope.row.status==3)  && (scope.row.articleStatus == null || scope.row.articleStatus == 0)">已截稿</div>
        </template>  
      </el-table-column>
      <el-table-column
              width = "160"
              label="截稿日期">
        <template slot-scope="scope">
            <p>{{scope.row.endTime | stampFormate2}}</p>
        </template>
      </el-table-column>
      <el-table-column
              label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.status!=2 || scope.row.endTime <= endTimes || (scope.row.articleStatus != 0 && scope.row.articleStatus != null)" @click="getArticleDemandid(scope.row)">详情</el-button>
            <!-- <el-button type="text" size="small" v-if="scope.row.status==2 && (scope.row.articleStatus == 1 || scope.row.articleStatus == 2)" @click="getArticleDemandid(scope.row)">详情</el-button> -->
            <el-button type="text" size="small" v-if="scope.row.status==2 && (scope.row.endTime > endTimes) && (scope.row.articleStatus == 0 || scope.row.articleStatus == null)" @click="getArticleDemandid(scope.row)">投稿</el-button>
        </template>
      </el-table-column>
    
    </el-table>
    <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>
    <!--弹框-->
 <el-dialog
            :title="dialog.title"
            :modal="false"
            :visible.sync="centerDialogVisible"
            center>
     
        <!--需求信息-->
        <div class="xm-item">
          <div class="left">
            <p class="p tit"><span class="line"></span>{{proObj.name}}</p>
            <p class="p des">{{proObj.description}}</p>
            <p class="p info">
              <span>{{proObj.endTime | stampFormate2}} 截稿 • </span>
              <span>{{proObj.dicName }} • </span>
              <!-- <span v-if="proObj.status == 1">未发布</span> -->
              <span v-if="proObj.status==2 &&  (proObj.articleStatus == null || proObj.articleStatus == 0)">征稿中</span>
              <span v-if="proObj.status==3 &&  proObj.articleStatus == null">已完成</span>
              <span v-if="proObj.status==5 &&  proObj.articleStatus == null">已结束</span>
              <!-- <span v-if="proObj.status==2 &&  proObj.articleStatus == 0">草稿</span> -->
              <!-- <span v-if="artstatus==1">审核中</span> -->
              <!-- <span v-if="artstatus==6 || artstatus==2 || artstatus == 7">写作中</span> -->
              <!-- <span v-if="proObj.articleStatus != null && artstatus==3">未采纳</span> -->
              <!-- <span v-if="artstatus==0">草稿</span> -->
              <span v-if="artstatus==1">审阅中</span>
              <span v-if="artstatus==6 || artstatus==7">待写作</span>
              <span v-if="artstatus==2">校稿中</span>
              <span v-if="artstatus==4">已定稿</span>
              <span v-if="artstatus==5">未接受</span>
              <span v-if="artstatus==3">未采纳</span>
            </p>
          <!--   <el-button v-if="proObj.status==2 && (proObj.articleStatus == 0 || proObj.articleStatus == null) && dialog.oprTyp==''" @click="tougao">投稿</el-button> -->
          </div>
        </div>
        <!--表单-->
         <div v-show="dialog.oprTyp == 1">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="title" size="mini">
            <el-input v-model="ruleForm.title" ></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <el-input type="textarea" v-model="ruleForm.content" name="editor"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="postArticle(2)" size="mini">提交</el-button>
            <el-button type="primary" @click="postArticle(1)" size="mini" v-if="artstatus!=2&&artstatus!=6">暂存</el-button>
            <el-button @click="centerDialogVisible = false" size="mini">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="dialog.oprTyp == 2">
        <!--文章需求详情-->
  <!--       <div class="xm-item">
          <div class="left">
            <p class="p tit"><span class="line"></span>{{proObj.name}}</p>
            <p class="p des">{{proObj.description}}</p>
            <p class="p info">
              <span>{{proObj.endTime | getFormatOfDate('yyyy-MM-dd hh:mm')}} 截稿 • </span>
              <span>{{proObj.dicName }} • </span>
              <span v-if="proObj.status == 1">未发布</span>
              <span v-if="proObj.status == 2">待分配</span>
              <span v-if="proObj.status == 3">已完成</span>
              <span v-if="proObj.status == 4">待写作</span>
              <span v-if="proObj.status == 5">已过期</span>
            </p>
          </div>
        </div> -->
        <!--文章详情-->
        <div class="reqCover">
          <div class="item">
            <div class="left">
              <p class="p tit">{{articleDetail.title}}</p>
              <p class="p info">
                <span>{{articleDetail.userName}} • </span><span>{{articleDetail.createTime | stampFormate2}} 发布</span>
              </p>
              <div class="p info">
                <div class="twoLine" v-html="articleDetail.content"></div>
                 <a class="aLink" @click="godelivery(articleDetail.id)">阅读全文</a>
                <!-- <a class="aLink">阅读全文</a> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <span v-if="dialog.oprTyp == 3">删除后不可恢复，确定删除吗？</span>
      <span v-if="dialog.oprTyp == 3" slot="footer" class="dialog-footer">
            <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleOk">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>
<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
    // import CKEDITOR from "../../../src/assets/js/common/ckeditor/ckeditor"
    // import '../../mixin/filter';
    // let myEditor;// 富文本编辑器
  export default {
    props: [],
    data () {
      return {
        // 操作区
        status: '', // 选择需求状态
        query: '', // 查询条件
        dicId: '', //行业状态
        options:[],
        empty:'加载中...',//提示文字
        endTimes:'',//截稿时间
        // 列表
        tableData: [], //列表数据
        // 分页
        inde:1,
        currentPage:1,
        pages:{
           no:1,
           size:10,
        },
        // 弹层
       proObj:'',          //x_需求
       articleDetail:'',  //x_详情
        dialog: {
          title: '',
          content: '',
          rows: '',
          index: '',
          id: '',
          oprTyp: '', //操作类型：1.删除；2.审核
        },
         // 表单
        ruleForm: {
          articleId: 0,
          projectId: 0,
          demandId: 0,
          title: '',
          content: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' },
            { min: 0, max: 20, message: '长度在 20 个字符内', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入文章内容', trigger: 'blur' }
          ]
        },
        centerDialogVisible: false, // 弹框
        editors:'',
        artstatus:'',     //我的写作详情状态值
        projectId:'',
        id:'',
        articleDemandId:'',
        myEditor:null,
      }
    },
    // components: {pagination},
    mounted () {
      // let that = this;
      // that.getList();
      this.getDictionaries()
      this.getArticleDemandfront()

    
    },
    methods: {
    
      editor(){
                let CKEDITOR = window.CKEDITOR;

                 this.myEditor = CKEDITOR.replace("editor",
                    {height: "240px",
                        width: "100%",
                        toolbar: "Full",
                        language : 'zh-cn',
                        filebrowserImageUploadUrl : 'http://api.welltour.cn/ckFiles?backUrl=http://welltour.cn/ckFiles',
                        image_previewText : '',});
                   // myEditor.setData(this.editors);
            },
      //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getArticleDemandfront()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getArticleDemandfront()
      },
      // 
      tougao:function(){
                 let that=this
                 // that.getArticleid()
                 // getArticleid
                 that.ruleForm.title=''
                 that.ruleForm.content=''
                 
                 
                  that.dialog.oprTyp=1
                   // setTimeout(function () {
                     if(that.myEditor == null || that.myEditor == 'undefined'){

                           that.editor();
                         }
                         window.CKEDITOR.instances.editor.setData(that.ruleForm.content); 
                 // that.editor();
                 // myEditor.setDate('')
                  // },100);
                   // window.CKEDITOR.instances.editor.setData();
                    // myEditor.setDate(that.articleDetail.content)
             
      },
      // 已交稿写作文章
      godelivery:function(id){
          window.open(window.location. origin + '/articles?id='+id)
         // this.$router.push({path:'/articles',query:{id:id}})
      },
      //获得列表
      getArticleDemandfront (type) {
        let that = this;
            if(type==true){
               that.currentPage=1
               that.pages.no=1
            }
        commonService.getArticleDemandfront({pageNo: that.pages.no, pageSize:that.pages.size,query:that.query,type:that.status,dicId:that.dicId}).then(function (res) {
                  if(res.data.code==200){
                     
                          that.endTimes=Date.parse(new Date())
                          that.tableData=res.data.datas.records
                          that.inde=res.data.datas.total
                          // that.tableData=[]
                          console.log(that.tableData)
                          that.empty="暂无数据"
                  }
                  
        });
      },
      // 获取分类
      getDictionaries () {
        let that = this;
        commonService.getDictionaries({type:2}).then(function (res) {
                  if(res.data.code==200){
                          that.options=res.data.datas
                          let obj={name:'所有行业',id:''}
                          that.options.unshift(obj)
                  }
                  
        });
      },
       // 获取写作需求
       getArticleDemandid:function(list){
            let that=this



             if(list.articleStatus==4){
              that.$router.push({path:"/writing",query:{id:list.id}})
                return false
               // window.open(window.location. origin + '/articles?id='+list.articleId)
               // that.$router.push({path:"/articles",query:{id:list.articleId}})
                 commonService.getArticleDemandid(list.id).then(function(res){
            
                    if(res.data.code == 200){
                        that.proObj=res.data.datas
                        // that.countdown=common.getTimer(that.data.endTime) 
                        // that.totime = new Date().getTime()
                        // that.show=true
                        that.centerDialogVisible=true  
                        that.artstatus=''
                        if(that.proObj.articleStatus != null){
                              that.getArticleid()
                        }else{
                           that.dialog.oprTyp=''
                        }
                        if(that.proObj.status==2 && (that.proObj.articleStatus == 0 || that.proObj.articleStatus == null) && that.dialog.oprTyp==''){
                                that.ruleForm.title=''
                                that.ruleForm.content=''
                              that.dialog.oprTyp=1
                               // setTimeout(function () {
                                if(that.myEditor == null || that.myEditor == 'undefined'){
                                        setTimeout(function () {
                                       that.editor();
                                         },100); 
                                        return blur
                                    }

                                  window.CKEDITOR.instances.editor.setData(that.ruleForm.content); 
                        }
                           
                    }
              })

             }else{
                 that.$router.push({path:"/writing",query:{id:list.id}})
                return false
              commonService.getArticleDemandid(list.id).then(function(res){
            
                    if(res.data.code == 200){
                        that.proObj=res.data.datas
                        // that.countdown=common.getTimer(that.data.endTime) 
                        // that.totime = new Date().getTime()
                        // that.show=true
                        that.centerDialogVisible=true  
                        that.artstatus=''
                        if(that.proObj.articleStatus != null){
                              that.getArticleid()
                        }else{
                           that.dialog.oprTyp=''
                        }
                        if(that.proObj.status==2 && (that.proObj.articleStatus == 0 || that.proObj.articleStatus == null) && that.dialog.oprTyp==''){
                                that.ruleForm.title=''
                                that.ruleForm.content=''
                              that.dialog.oprTyp=1
                               // setTimeout(function () {
                                if(that.myEditor == null || that.myEditor == 'undefined'){
                                        setTimeout(function () {
                                       that.editor();
                                         },100); 
                                        return blur
                                    }

                                  window.CKEDITOR.instances.editor.setData(that.ruleForm.content); 
                        }
                           
                    }
              })}

          },
          // 获取我的写作详情
          getArticleid:function(){
            let that=this

             if(that.proObj.articleId != null){
                   commonService.getArticleid(that.proObj.articleId).then(function(res){
                   // that.pageNo++
                    if(res.data.code == 200){
                        that.articleDetail=res.data.datas
                        that.articleDetail.content=that.articleDetail.content.replace(/<[^>]+>/g,"");

                        that.ruleForm.title=res.data.datas.title
                        that.ruleForm.content=res.data.datas.content
                         
                        that.artstatus=res.data.datas.status
                        that.projectId=res.data.datas.projectId
                        that.articleDemandId=res.data.datas.articleDemandId
                        that.id=res.data.datas.id
                         if(that.artstatus==2||that.artstatus==0||that.artstatus==''||that.artstatus==6){
                              that.dialog.oprTyp=1
                               // setTimeout(function () {
                                if(that.myEditor == null || that.myEditor == 'undefined'){
                                        setTimeout(function () {
                                       that.editor();
                                         },100); 
                                    }
                                  window.CKEDITOR.instances.editor.setData(that.ruleForm.content);   
                             // that.editor();
                              // },100); 
                            
                               // myEditor.setDate(that.articleDetail.content)
                         }else{
                             that.dialog.oprTyp=2
                         }
                       
                          // that.hideshow=true
                        // that.data=res.data.datas.records
                       // for(let i=0;i<that.data.length;i++){
                       //   that.countdown[i]=common.getTimer(that.data[i].end_time) 
                       //  }   
                    }
              })
             }
          },
           //新增
          postArticle:function(type){
              let that=this
                   let id=that.proObj.id
                   let projectId=that.proObj.projectId
                   that.ruleForm.content=that.myEditor.getData()
                   if(that.ruleForm.title==''){
                      that.$message.error('请填写文章标题');
                      return false
                   }
                     if(that.ruleForm.content==''){
                       that.$message.error('请填写文章内容');
                       return false
                     }
                   if(that.artstatus == 2){
                      type=3
                   }

                  
                if(that.proObj.articleId == null){
                      commonService.postArticle({projectId:projectId,articleDemandId:id,title:that.ruleForm.title,content:that.ruleForm.content,type:type}).then(function(res){
                  
                   if(res.data.code==200){
                    that.centerDialogVisible=false
                    that.getArticleDemandfront()
                
                      if(type==2){
                        that.articleId=res.data.datas.id
                        that.postApply()
                       }
                       that.$message.success("修改");
                      
                   }else{
                    that.$message.error(res.data.message);
                   }
              })
                    }else{
         commonService.putArticle({id:that.proObj.articleId,projectId:projectId,articleDemandId:id,title:that.ruleForm.title,content:that.ruleForm.content,type:type}).then(function(res){
             
                   if(res.data.code==200){
                   that.centerDialogVisible=false
                    that.getArticleDemandfront()

                      if(type==2){
                        that.articleId=res.data.datas.id
                        that.postApply()
                       }
                       that.$message.success("修改");
                    
                   }else{
                    that.$message.error(res.data.message);
                   }           
              })
             } 
          },
          // 申请写作
          postApply:function(){
            let that=this
            let id=that.proObj.id
             commonService.postApply({articleId:that.articleId,projectId:that.projectId,articleDemandId:id,}).then(function(res){
                                
                 })
          },
  
    },
   
  }
</script>
<style lang="less">
    
    .demand{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
  .reqCover{
    .twoLine{
        margin-top: 20px;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;

        img{ max-width: 100%;
             height: auto !important;}
    }
     .aLink{
        color: #f29700;
        cursor: pointer;
    }

  }
  .xm-item{
    line-height: 1.8;
    font-family: Menlo,Monaco,Consolas,Courier,monospace;
    font-size: 12px;
    padding: 12px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    -webkit-font-smoothing: auto;
    display:flex;justify-content: space-between;align-items: flex-start;
    .p.tit{min-height: 30px;line-height: 30px;font-size: 16px;color: #333;
      display:flex; justify-content: flex-start; align-items: center;
    .line{display:block;height: 14px;border-left:2px solid #f29700;float:left;margin-right: 8px;}
    }
    .p.des{min-height: 25px;font-size: 14px;color:#666;}
    .p.info{font-size: 12px; color:#999;}
    .left{ width: 95%; }
    .right{ width: 5%; display:flex;justify-content: space-around;align-items: flex-start;
    i:hover{color:#409EFF;cursor: pointer;}
    }
  }
  .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
       .el-dialog{
           width: 640px;
           max-height: 80%;
           overflow-y:auto; 
           margin: 0 auto;
       }
    }
      
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
</style>